<template>
  <div>
      <table>
          <tr>
              <td>名称</td>
              <td>操作</td>
          </tr>
          <tr v-for="i in list">
              <td>{{i.name}}</td>
              <td>
                  <router-link :to="{name:'updatecate',query:{'id':i.id}}">修改</router-link>
                  <button @click="del(i.id)">删除</button>
              </td>
          </tr>
          <tr>
              <td>
                  <van-pagination
                  v-model="currentPage"
                  :page-count="total"
                  :items-per-page="3"
                  @change="getlist"
                  force-ellipses
                  />
              </td>
          </tr>
      </table>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:[],
            currentPage:1,
            total:10
        }
    },
    methods:{
        // v形参，传递当前页数
        getlist(v){
            this.currentPage = v
            this.axios.get('cateM?page='+v).then(res=>{
                this.list = res.data.list
                this.total = res.data.total
            })
        },
        // 删除
        del(id){
            this.axios.delete('cateM?id='+id).then(res=>{
                this.getlist(1)
            })
        }
    },
    mounted(){
        this.getlist(1)
    }
}
</script>

<style>

</style>